<template>
  <div class="menus">
    <div>
      <a :class="{ disabled: !props.node && !props.nodes }" @click="onTop()"
        >置顶</a
      >
    </div>
    <div>
      <a :class="{ disabled: !props.node && !props.nodes }" @click="onBottom()"
        >置底</a
      >
    </div>
    <div class="line"></div>
    <div v-if="props.nodes">
      <a @click="onCombine()">组合</a>
      <div>
        <a @click="onCombine(true)">包含</a>
      </div>
    </div>
    <div v-if="props.node && props.node.name === 'combine'">
      <a @click="onUncombine()">取消组合/包含</a>
    </div>
    <div>
      <a :class="{ disabled: !props.node && !props.nodes }" @click="onLock()">{{
        props.locked ? '解锁' : '锁定'
      }}</a>
    </div>
    <div class="line"></div>
    <div>
      <!-- <a :class="{disabled:!props.node && !props.nodes && !props.line}" @click="onDel()">删除</a> -->
      <a @click="onDel()">删除</a>
    </div>
    <div class="line"></div>
    <div>
      <a @click="canvas.undo()" class="flex">
        <span class="full">撤消</span>
        <span class="ml50">Ctrl + Z</span>
      </a>
    </div>
    <div>
      <a @click="canvas.redo()">
        恢复
        <span class="ml50">Ctrl + Shift+ Z</span>
      </a>
    </div>
    <div class="line"></div>
    <div>
      <a @click="canvas.cut()" class="flex">
        <span class="full">剪切</span>
        <span class="ml50">Ctrl + X</span>
      </a>
    </div>
    <div>
      <a @click="canvas.copy()" class="flex">
        <span class="full">复制</span>
        <span class="ml50">Ctrl + C</span>
      </a>
    </div>
    <div>
      <a @click="canvas.paste()" class="flex">
        <span class="full">粘贴</span>
        <span class="ml50">Ctrl + V</span>
      </a>
    </div>
    <div class="line"></div>
    <div>
      <a
        :class="{ disabled: !props.node || !props.node.image }"
        @click="onCopyImage()"
        class="flex"
      >
        <span class="full">复制节点图片地址</span>
      </a>
    </div>
    <div class="line"></div>
    <div>
      <a @click="open()" class="flex">
        <span class="full">显示设备详细信息</span>
      </a>
    </div>
    <div class="line"></div>
    <div>
      <a @click="dialogVisible = true" class="flex">
        <span class="full">修改信息</span>
      </a>
    </div>
    <div>
      <a @click="change()" class="flex">
        <span class="full">修改设备状态</span>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //由于位置放错导致不能调用父组件的方法，吸取教训。
      // props: {
      //   canvas: {
      //     type: Object,
      //     require: true
      //   },
      //   props: {
      //     type: Object,
      //     require: true
      //   }
      // }
    }
  },
  props: {
    canvas: {
      type: Object,
      require: true
    },
    props: {
      type: Object,
      require: true
    }
  },
  methods: {
    change: function() {
      // 子组件中触发父组件方法ee并传值cc12345
      this.$emit('ee', 'true')
    },
    open() {
      this.$alert('电压：110V,电流：5A，电量：10kw', '设备详细信息：', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info'
            // message: `action: ${ action }`
          })
        }
      })
    },
    // change() {
    //   this.dialogVisible = true
    //   alert(this.dialogVisible)
    // },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          if (process.client) {
            document.onclick = event => {
              this.contextmenu = {
                left: null,
                top: null,
                bottom: null
              }
            }
          }
          done()
        })
        .catch(_ => {})
    },

    openinfo() {
      this.dialogVisible = true
    },
    onTop() {
      if (this.props.node) {
        this.canvas.top(this.props.node)
      }

      if (this.props.nodes) {
        for (const item of this.props.nodes) {
          this.canvas.top(item)
        }
      }

      this.canvas.render()
    },

    onBottom() {
      if (this.props.node) {
        this.canvas.bottom(this.props.node)
      }

      if (this.props.nodes) {
        for (const item of this.props.nodes) {
          this.canvas.bottom(item)
        }
      }

      this.canvas.render()
    },

    onCombine(stand) {
      if (!this.props.nodes) {
        return
      }
      this.canvas.combine(this.props.nodes, stand)
      this.canvas.render()
    },

    onUncombine() {
      if (!this.props.node) {
        return
      }
      this.canvas.uncombine(this.props.node)
      this.canvas.render()
    },

    onLock() {
      this.props.locked = !this.props.locked
      console.log(this.props.locked)
      if (this.props.node) {
        this.props.node.locked = this.props.locked
        console.log(this.props.node)
      }
      if (this.props.nodes) {
        console.log(this.props.nodes)
        for (const item of this.props.nodes) {
          item.locked = this.props.locked
        }
      }
      if (this.props.lines) {
        console.log(this.props.lines)
        for (const item of this.props.lines) {
          item.locked = this.props.locked
        }
      }
      this.canvas.render(true)
    },

    onDel() {
      this.canvas.delete()
      this.$message({
        type: 'info',
        message: '删除设备成功'
      })
      //   this.$axios({
      //     method: 'get',
      //     params: {
      //       // tablename:node.data.text+new Date().getTime()
      //       tablename: this.props.node.id
      //     },
      //     url: 'http://127.0.0.1:8082/add/delete'
      //   }).then(res => {
      //     // this.props.value.value_1=res.data[0].speed;
      //     // console.log( this.props.value.value_1);
      //     //当选中的时候赋予属性值node
      //     console.log('删除成功')
      //   })
      //   this.canvas.delete()
      //   this.$message({
      //     type: 'info',
      //     message: '删除设备成功'
      //   })
    }
  }
}
</script>

<style lang="scss">
.menus {
  color: #000;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  min-width: 1.8rem;
  text-align: left;
  padding: 0.08rem 0;

  & > div {
    line-height: 2.2;
    a {
      color: #314659;
      display: block;
      padding: 0 0.2rem;
      text-decoration: none;
      cursor: pointer;

      &:hover {
        color: #1890ff;
      }

      &.flex {
        display: flex;
      }

      &.disabled {
        color: #ccc;
        cursor: default;
      }
    }
  }

  .line {
    background-color: transparent !important;
    padding: 0;
    margin: 0.05rem 0;
    border-top: 1px solid #eee;
  }
}
</style>
